<!-- 回款列表-新建回款信息组件  -->
<template>
  <a-modal
    width="70%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 新建发票记录 </template>
    <div>
      <a-form :model="form" :rules="rules" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedCode" label="回款类型：">
              <a-select
                placeholder="请选择回款类型"
                v-model="form.info.collectionTypeId"
              >
                <a-option
                  v-for="(item, index) in settingData"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedType" label="发票编号：">
              <a-input
                placeholder="系统自动生成"
                size="large"
                disabled
                v-model="form.info.invoiceNumber"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedWays" label="发票类型：">
              <a-select
                placeholder="请选择发票类型"
                v-model="form.info.invoiceTypeId"
                @change="getTaxRate"
              >
                <a-option
                  v-for="(item, index) in invoiceForm"
                  :key="index"
                  :value="item.id"
                  >{{ item.typeName }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedTime" label="发票税率：">
              <a-input
                placeholder="选择发票类型后自动带出发票税率"
                size="large"
                v-model="form.info.TaxRate"
                allow-clear
                ><template #suffix> % </template></a-input
              >
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开票时间：">
              <a-date-picker
                v-model="form.info.invoicingTime"
                style="width: 200px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="开票金额：">
              <a-input-number
                :min="1"
                placeholder="请输入开票金额"
                allow-clear
                v-model="form.info.invoicingPrice"
                :hide-button="true"
              >
                <template #prepend>￥</template>
                <template #append> 人民币 </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开票科目：">
              <a-input
                placeholder="请输入开票科目"
                size="large"
                v-model="form.info.invoicingSubject"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="开票人：">
              <a-select
                placeholder="请选择开票人"
                v-model="form.info.invoicingUserId"
              >
                <a-option
                  v-for="(item, index) in PersonnelInfoData"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <div
          style="
            margin-left: 38px;
            background: aliceblue;
            height: 30px;
            display: flex;
            line-height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
          ><span>客户发票信息</span></div
        >
        <a-row style="margin-top: 20px" :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="单位抬头:">
              <a-input
                placeholder="请填写账号"
                size="large"
                disabled
                v-model="formList.companyTitle"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="纳税人识别号：">
              <a-input
                placeholder="请填写账号"
                size="large"
                disabled
                v-model="formList.ein"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开户行：">
              <a-input
                placeholder="请填写账号"
                disabled
                size="large"
                v-model="formList.accountBank"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="单位地址：">
              <a-input
                placeholder="请填写账号"
                size="large"
                disabled
                v-model="formList.companyAddress"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, watchEffect, ref } from 'vue';
  import { cloneDeep } from 'lodash';
  import { GetSetInvoiceInfo } from '@/api/order-management/returned-management/base-setting/index';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list/index';
  import { GetReturnedTypeInfo } from '@/api/order-management/returned-management/base-setting';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  import { openChoiceFile } from '@/utils/file';
  import { FileUpload } from '@/utils/upload';
  // 获取回款类型设置基本信息
  const settingData = ref();
  const getClientSettingInfo = async () => {
    const res = await GetReturnedTypeInfo();
    settingData.value = res;
  };

  getClientSettingInfo();
  const isShow = ref(false);
  const props = withDefaults(
    //参数说明
    defineProps<{
      visible: boolean;
      clientId: number;
      orderId: string;
      currForm: any;
    }>(),
    {
      visible: false,
    }
  );

  // // eslint-disable-next-line no-redeclare
  // interface GetInvoiceInfo {
  //   orderId: number | undefined; //订单id
  //   collectionTypeId: number | undefined; //回款类型id
  //   invoiceNumber: string; //发票编号
  //   InvoiceTypeId: number | undefined; //发票类型Id
  //   invoicingTime: any; //开票时间
  //   invoicingPrice: number | undefined; //开票金额
  //   invoicingPriceUnit: string; //开票金额单位
  //   invoicingSubject: string; //开票科目
  //   invoicingUserId: number | undefined; //开票人
  //   invoiceMessageId: number | undefined; //开票账户信息id
  //   invoiceProofFileId: number | undefined; //发票凭证文件id
  //   TaxRate: string;
  // }

  let form: any = reactive({ info: { file: [{ name: '', addr: '' }] } });

  const formList = reactive({
    companyTitle: '', //公司抬头
    ein: undefined, //税号
    accountBank: '', //开户省市
    companyAddress: '', //公司地址
  });

  const formContent = Object.keys(formList);

  const emit = defineEmits(['update:visible', 'editinvoiceInfo']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const invoiceForm = ref([]);
  const getAccountInvoice = async () => {
    const res = await GetSetInvoiceInfo();
    invoiceForm.value = res;
  };
  getAccountInvoice();

  // 获取客户发票信息
  const getCustomerInfo = async (id: number) => {
    const res = await GetClientDetailTabs({ id, typeId: 1 });
    for (let i in res) {
      if (formContent.includes(i)) {
        formList[i] = res[i];
      }
    }
  };
  // 获取发票税率
  const getTaxRate = (key: number) => {
    const msg: any = invoiceForm.value.filter((i) => i.id === key);
    form.info.TaxRate = msg[0].taxRate;
  };
  watchEffect(() => {
    if (modalVisible.value) {
      form.info.orderId = props.orderId;
      form.info.clientId = Number(props.clientId);
      getCustomerInfo(form.info.clientId);
    }
  });
  const rules = reactive({});

  // 保存按钮
  const handleOk = () => {
    form.info.invoicingTime = new Date(form.info.invoicingTime).toJSON();
    emit('editinvoiceInfo', form.info);
    modalVisible.value = false;
  };

  // 取消按钮
  const handleCancel = () => {
    modalVisible.value = false;
  };

  // 获取销售负责人信息
  const PersonnelInfoData = ref();
  const GetPersonnelInfo = async () => {
    const res = await GetPersonnelinformation({ page: 1, size: 99999 });
    PersonnelInfoData.value = res.content.data;
  };
  GetPersonnelInfo();

  const fileData = reactive<{ file?: File }>({});

  const upload = async () => {
    let file = new FormData();
    fileData.file = await openChoiceFile(
      ['.mp4', '.pdf', '.png', '.txt', '.jpg', 'docx'],
      1024 * 1024 * 10
    );
    file.append('data', fileData.file);
    const res: any = await FileUpload(file);
    if (res) {
      form.info.file[0].name = res.data.data.name;
      form.info.file[0].addr = res.data.data.sourceAddr;
      isShow.value = true;
    }
  };
</script>

<style scoped lang="less"></style>
